{% extends "base.html" %}

{% block title %}UNITY 3D - Tasks{% endblock %}
{% block page_content %}
    {% include '_assign_task.html' %}
    <div class="page-header">
        {% if current_user.is_authenticated %}
            <div>
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h3 class="panel-title" style="font-size: x-large;">
                            <i class="fa fa-file-text"></i>
                            Files
                        </h3>
                    </div>
                    <div class="panel-body">
                        <div id="thelist" class="uploader-list"></div>
                        <table id="table_file"></table>
                        <div id="toolbar" style="float:left;" >
                            <div id="uploader">
                                <div class="btns">
                                    <div id="picker" style="float:left;">
                                        <i class="fa fa-cloud-upload"></i>
                                        upload file</div>
                                    <button id="deleteBtn" class="btn btn btn-danger" style="float:left;">
                                        <i class="fa fa-remove"></i>
                                        delete file</button>
                                    <button id="assigntaskBtn" class="btn btn btn-success" data-toggle="modal" data-target="#myModal" style="float:left; margin-left: 10px">
                                        <i class="fa fa-calendar"></i>
                                        assign task</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h3 class="panel-title" style="font-size: x-large;">
                            <i class="fa fa-tasks"></i>
                            Task Printing
                        </h3>
                    </div>
                    <div class="panel-body">
                        <table id="table_printing"></table>
                        <div id="toolbar" style="float:left;" >
                        </div>
                    </div>
                </div>
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h3 class="panel-title" style="font-size: x-large;">
                            <i class="fa fa-tasks"></i>
                            Task Waiting
                        </h3>
                    </div>
                    <div class="panel-body">
                        <table id="table_wait"></table>
                        <div id="toolbar" style="float:left;" >
                        </div>
                    </div>
                </div>
            </div>
        {% else %}
            <h2>Welcome to Unity3D Cloud Factory.</h2>
            <p>
                <a href="{{ url_for('auth.register') }}">
                Click here to register
                </a>
            </p>
        {% endif %}
    </div>
{% endblock %}

{% block scripts %}
    <script src="{{ url_for('static', filename='jquery-2.0.3.min.js') }}"></script>
    {{ super() }}
    <script src="{{ url_for('static', filename='bootstrap-table.js') }}"></script>
    <script src="{{ url_for('static', filename='webuploader-0.1.5/webuploader.js') }}"></script>
	<script type="text/javascript">
    function myInterval(){
        $.getJSON("/tasks-info", { cmd: 'task_info'},
        function (data) { 
            $('#table_printing').bootstrapTable('load', data);
            $('#table_wait').bootstrapTable('load', data);
         });
    }
    $(window).ready(function () {
        setInterval("myInterval()", 5000);
        var uploader = WebUploader.create({
            swf: 'static/webuploader-0.1.5/Uploader.swf',
            server: '/upload-file',
            pick: '#picker',
            resize: false,
            auto: true,
            accept: {
                title: 'GCODE',
                extensions: 'gcode'
            }
        });
        uploader.on('fileQueued', function (file) {
            $('#thelist').append('<div id="' + file.id + '" class="item">' +
                '<h4 class="info">' + file.name + '</h4>' +
                '<p class="state">waiting...</p>' +
            '</div>');
        });
        uploader.on('uploadProgress', function (file, percentage) {
            var $li = $('#' + file.id),
                $percent = $li.find('.progress .progress-bar');

            if (!$percent.length) {
                $percent = $('<div class="progress progress-striped active">' +
                  '<div class="progress-bar" role="progressbar" style="width: 0%">' +
                  '</div>' +
                '</div>').appendTo($li).find('.progress-bar');
            }

            $li.find('p.state').text('uploading');

            $percent.css('width', percentage * 100 + '%');
        });
        uploader.on( 'uploadSuccess', function( file ) {
            $( '#'+file.id ).find('p.state').text('已上传');
            $('#thelist').empty();
        });

        uploader.on( 'uploadError', function( file ) {
            $( '#'+file.id ).find('p.state').text('上传出错');
        });

        uploader.on( 'uploadComplete', function( file ) {
            $( '#'+file.id ).find('.progress').fadeOut();
            uploader.reset();
            $.getJSON("/uploaded-files",
            function (data) { 
                $('#table_file').bootstrapTable('load', data);
             });
        });
        $("#ctlBtn").click(function () {
            uploader.upload();
        });

        function getSelectionsFileName() {
            var deletefiles =  $('#table_file').bootstrapTable('getAllSelections');
            var files = '';
            for(var i =0;i<deletefiles.length - 1;i++){
                files += deletefiles[i]['name'] + ',';
            }
            files += deletefiles[deletefiles.length - 1]['name'];
            return files;
        }

        function getSelectionsFileId() {
            var deletefiles =  $('#table_file').bootstrapTable('getAllSelections');
            var files = '';
            for(var i =0;i<deletefiles.length - 1;i++){
                files += deletefiles[i]['id'] + ',';
            }
            files += deletefiles[deletefiles.length - 1]['id'];
            return files;
        }

        function getMachineInfo() {
            var machine_info = new Array();
            machine_info['machine_type'] =  $('#machine_type').val()
            machine_info['material'] = $('#machine_material').val()
            machine_info['color'] = $('#material_color').val()
            machine_info['task_num'] = $('#task_num').val()
            return machine_info;
        }

        $("#deleteBtn").click(function () {
            var files = getSelectionsFileName();
            $.getJSON("/delete-files", { files : files},
            function (data) { 
                $('#table_file').bootstrapTable('load', data);
             });
        });

        $("#upload_task").click(function () {
            var files_id;
            var machine_info;
            $("#upload_task").attr('disabled',true);
            $("#myModal").modal('hide');
            try {
                files_id = getSelectionsFileId();
                machine_info = getMachineInfo();

                $.getJSON("/add-tasks", { files : files_id, machine_info : machine_info},
                function (data) { 
                    $("#upload_task").attr('disabled',false);
                    $("#myModal").modal('hide');
                    var i = data;

                 });
            }
            catch(err) {
                alert(err)
                $("#upload_task").attr('disabled',false);
                $("#myModal").modal('hide');
            }
        });

        $('#table_file').bootstrapTable({
            url:'/uploaded-files',
            search:true,
            showRefresh:true,
            pagination:true,
            pageNumber:1,
            pageSize:10,
            pageList: [10, 25, 50, 100],
            toolbar: '#toolbar',
            columns: [
            {
                checkbox: true
            }, {
                field: 'index',
                title: 'index',
                align: 'center',
                valign: 'middle',
                formatter: function (value, row, index) {
                    return index+1;
                }
            }, {
                field: 'id',
                title: 'id',
                align: 'center',
                valign: 'middle'
            }, {
                field: 'name',
                title: 'name',
                align: 'center',
                valign: 'middle'
            }, {
                field: 'upload_time',
                title: 'upload_time',
                align: 'center',
                valign: 'middle'
            }, {
                field: 'size',
                title: 'size',
                align: 'center',
                valign: 'middle'
            }, {
                field: 'owner',
                title: 'owner',
                align: 'center',
                valign: 'middle'
            }],
            onRefresh: function () {
            }
        });
        $('#table_printing').bootstrapTable({
            url:'/tasks-info',
            search:true,
            showRefresh:true,
            pagination:true,
            pageNumber:1,
            pageSize:10,
            pageList: [10, 25, 50, 100],
            columns: [
            {
                field: 'index',
                title: 'index',
                align: 'center',
                valign: 'middle',
                formatter: function (value, row, index) {
                    return index + 1;
                }
            }, {
                field: 'id',
                title: 'id',
                align: 'center',
                valign: 'middle'
            }, {
                field: 'file_info',
                title: 'file_info',
                align: 'left',
                valign: 'middle'
            }, {
                field: 'machine_info',
                title: 'machine_info',
                align: 'left',
                valign: 'middle'
            }, {
                field: 'start',
                title: 'start',
                align: 'center',
                valign: 'middle'
            }, {
                field: 'end',
                title: 'end',
                align: 'center',
                valign: 'middle'
            }, {
                field: 'priority',
                title: 'priority',
                align: 'center',
                valign: 'middle'
            }, {
                field: 'progress',
                title: 'progress',
                align: 'center',
                valign: 'middle'
            }, {
                field: 'owner',
                title: 'owner',
                align: 'center',
                valign: 'middle'
            }],
            onRefresh: function () {

            },
            onLoadSuccess: function () {
                 $('#table_printing').bootstrapTable('filterBy', {state: 'assigned'});
            }
        });
        $('#table_wait').bootstrapTable({
            url:'/tasks-info',
            search:true,
            showRefresh:true,
            pagination:true,
            pageNumber:1,
            pageSize:10,
            pageList: [10, 25, 50, 100],
            columns: [
            {
                field: 'index',
                title: 'index',
                align: 'center',
                valign: 'middle',
                formatter: function (value, row, index) {
                    return index + 1;
                }
            }, {
                field: 'id',
                title: 'id',
                align: 'center',
                valign: 'middle'
            }, {
                field: 'file_info',
                title: 'file_info',
                align: 'center',
                valign: 'middle'
            }, {
                field: 'machine_info',
                title: 'machine_info',
                align: 'left',
                valign: 'middle'
            }, {
                field: 'start',
                title: 'start',
                align: 'center',
                valign: 'middle'
            }, {
                field: 'state',
                title: 'state',
                align: 'center',
                valign: 'middle'
            }, {
                field: 'priority',
                title: 'priority',
                align: 'center',
                valign: 'middle'
            }, {
                field: 'owner',
                title: 'owner',
                align: 'center',
                valign: 'middle'
            }],
            onRefresh: function () {

            },
            onLoadSuccess: function () {
                 $('#table_wait').bootstrapTable('filterBy', {state: 'waiting', state: 'preoperation'});
            }
        });
        })
	</script>
{% endblock %}
